<template>
  <div class="pageHeader">
    <a-row type="flex" justify="center" style="width: 86%;margin: 0 auto;margin-top: 24px;">
      <a-col :md="6" class="ie-fl">
        <img :src="require('../assets/logo.png')" class="logo" alt="">
        <div class="title">
          <h1>哈哈哈</h1>
          <p></p>
        </div>
      </a-col>
      <a-col :md="12">

      </a-col>
      <a-col :md="6" class="ie-fr">

        <div class="user">
          <div class="tx">
            <img :src="require('../assets/Image/avatar.png')" width="100%" alt="">
          </div>
          <a-dropdown>
            <p @click="e => e.preventDefault()"><a class="ant-dropdown-link">Admin <span>(个人用户)</span></a></p>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="loginOut">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>

      </a-col>
    </a-row>
  </div>
</template>

<script>
// import { closeWindows } from '@/utils/common';
export default {
  name: 'PageHeader',
  methods: {
    loginOut() {

    }
  }
};
</script>

<style scoped lang="less">
  .pageHeader {
    // height: 134px;
    height: 110px;
    width: 100%;
    background: #fff;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.38);;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 888;
  }
  .ie-fl {
    float: left;
  }
  .ie-fr {
    float: right;
  }
  .logo {
    width: 60px;
  }
  .title {
    display: inline-block;
    vertical-align: middle;
    margin-left: 21px;
    h1{
      margin: 0;
      color: #314b64;
      font-size: 32px;
      line-height: 1;
      font-weight: bold;
      text-align: justify;
      height: 38px;
      width: 172px;
    }
    h1:after {
      content: " ";
      display: inline-block;
      width: 100%;
    }
    p{
      margin: 0;
      color: #314b64;
      font-size: 17px;
      line-height: 1;
    }
  }
  .tx {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
  }
  .user {
    margin-top: 11px;
    text-align: right;
    p {
      color: #128bed;
      font-size: 20px;
      display: inline-block;
      margin: 0;
      margin-left: 12px;
      line-height: 36px;
      vertical-align: middle;
      span {
        color: #747474;
        font-size: 14px;
        line-height: 36px;
      }
    }
  }
</style>
